<template>
	<div>
		<head-goods-search :is_search="false" title="用户口碑" @sendSearch="sendSearch"></head-goods-search>
		<div class="reputation-container">
			<view class="reputation-list">
				<view class="li" v-for="(item,index) in  commentList" :key="index" @click="navigateGoods(item.id,'roteid')">
					<image :src="item.logo" />
					<div class="reputation-desc">
						<h3>{{item.stitle}}</h3>
						<p>{{item.pingjiaremark}}</p>
						<div class="timer">
							<h4>{{item.nickname}}</h4>
							<time>{{item.pingjiatime}}</time>
						</div>
						<h4>{{item.pingjia_num}}篇点评</h4>
					</div>
				</view>
			</view>
		</div>
		<div class="fgb">
			<paging :total="count" activecolor="#fff" activebackground="#fd8197" :pageSize='pagesize' :current="page" @changes="dd"></paging>
			<div class="reputation-show">
				<view class="reputation-menu">
					<view class="li" @click="changeMenu(index)" v-for="(item,index) in tabMenu" :key="index" :class="{active:isActive==index}">{{item}}</view>
				</view>
				<view class="reputation-rote-list" v-if="isActive==0">
					<view class="li" v-for="(item,index) in reputationCommentList" :key="index" @click="navigateGoods(item.id,'roteid')">
						<image :src="item.logo" />
						<div>
							<h3>{{item.nickname}} 对<span>{{item.stitle}}</span>评论说：</h3>
							<p>{{item.pingjiaremark}}</p>
						</div>
					</view>
				</view>
				<view class="reputation-rote-list" v-if="isActive==1">
					<view class="li" v-for="(item,index) in salesGoodsList" :key="index" @click="navigateGoods(item.id,'roteid')">
						<image :src="item.logo" />
						<div>
							<h3>{{item.title}}</h3>
							<p class="rote">
								评分
								<i class="hd-icon">&#xe608;</i>
								<i class="hd-icon">&#xe608;</i>
								<i class="hd-icon">&#xe608;</i>
								<i class="hd-icon">&#xe608;</i>
								<i class="hd-icon">&#xe608;</i>
							</p>
						</div>
					</view>
				</view>
			</div>
		</div>
		<foot-bottom></foot-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import paging from '@/components/yang-paging/fy.vue'; //分页
	import fab from '@/components/fab'; //快捷菜单
	import footBottom from '@/components/footBottom'; //公共底部
	import {
		getRote,
		getComment
	} from '@/api/shop';
	import {
		allComment,
		IndexComment
	} from '@/api/rote'
	export default {
		data() {
			return {
				isActive: 0,
				isTopBtn: false,
				page: 1,
				pagesize: 9,
				count: null,
				goodsId: '',
				commentList: [],
				salesGoodsList: [],
				reputationCommentList: [],
				tabMenu: ['精彩点评', '本周口碑榜']
			}
		},
		onLoad(e) {
			if (e.id) {
				this.goodsId = e.id;
				this.getList(this.page, e.id)
				getComment(e.id).then((res) => {
					this.salesGoodsList = res.data.datas.salesGoodsList;
					this.reputationCommentList = res.data.datas.reputationCommentList;
				})
			} else {
				this.getIndexList(this.page)
				IndexComment().then((res) => {
					this.salesGoodsList = res.data.datas.salesGoodsList;
					this.reputationCommentList = res.data.datas.reputationCommentList;
				})
			}
		},
		components: {
			paging,
			fab,
			footBottom,
		},
		onPageScroll(e) {
			if (e.scrollTop >= 400) {
				this.isTopBtn = true
			}
			if (e.scrollTop <= 100) {
				this.isTopBtn = false
			}
		},
		methods: {
			sendSearch(k) {
				this.keywords = k;
				if (this.goodsId) { //店铺
					this.getNews(this.page, this.goodsId, this.keywords)
				} else { //主站
					this.getList(this.page, this.keywords)
				}
			},
			getList(page, id) {
				getRote(id, page, this.pagesize).then((res) => {
					this.commentList = res.data.datas;
					this.count = res.data.count;
				})
			},
			getIndexList(page) {
				allComment(page, this.pagesize).then((res) => {
					this.commentList = res.data.datas;
					this.count = res.data.count;
				})
			},
			dd(index) {
				this.page = index;
				if (!this.goodsId) {
					allComment(this.page, this.pagesize).then((res) => {
						this.commentList = res.data.datas;
					})
				} else {
					getRote(this.goodsId, this.page, this.pagesize).then((res) => {
						this.commentList = res.data.datas;
					})
				}
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			trigger(e) {
				uni.redirectTo({
					url: e.item.url
				});
			},
			changeMenu(i) {
				this.isActive = i;
			},
			navigateGoods(id, type) {
				this.$Shop.navigateGoods(id, type);
			},
		}
	}
</script>

<style lang="scss">
	.reputation-container {
		margin-top:90rpx;
		background: #fff;

		.li {
			padding: 20rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #d1d1d1;

			image {
				width: 260rpx;
				height: 260rpx;
			}

			.reputation-desc {
				width: 430rpx;

				h3 {
					color: #ff468e;
					font-size: 28rpx;
					margin-bottom: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					line-height: 20px;
				}

				p {
					color: #333;
					font-size: 28rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
				}

				.timer {
					display: flex;
					justify-content: space-between;

					h4,
					time {
						color: #343434;
						font-size: 28rpx;
						margin-top: 10rpx;
					}
				}

				&>h4 {
					text-align: right;
					color: #343434;
					margin-top: 10rpx;
					font-size: 28rpx;
				}
			}
		}
	}

	.fgb {
		background: #fff;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.reputation-menu {
		display: flex;
		justify-content: space-between;

		.li {
			width: 50%;
			text-align: center;
			color: #343434;
			font-size: 16px;
			padding: 20rpx 0;
			border-bottom: 1px solid #eee;

			&.active {
				color: #FF273F;
			}
		}
	}

	.reputation-rote-list {
		padding-bottom: 20rpx;

		.li {
			display: flex;
			justify-content: space-between;
			width: 720rpx;
			margin: 0 auto;
			margin-top: 20rpx;

			image {
				width: 150rpx;
				height: 150rpx;
			}

			div {
				width: 550rpx;

				h3 {
					color: #343434;
					font-size: 28rpx;
					margin-bottom: 10rpx;

					span {
						color: #fd8197;
					}
				}

				p {
					color: #999;
					font-size: 28rpx;
					line-height: 22px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.rote {
					display: flex;
					justify-content: flex-start;
					color: #343434;

					i {
						color: #ec495e;

						&:nth-of-type(1) {
							margin-left: 4px;
						}
					}
				}
			}
		}
	}
</style>
